<!-- @format -->

<template>
    <div class="ma-content-block  p-4">
		<div style="margin-bottom:2%">
			<a-space>
				<div>筛选条件：</div>
				<a-cascader v-model="spaceValue" :options="spaceArr.value" :style="{width:'860px'}" placeholder="请选择..."  @change="handlechange" path-mode allow-search />
			</a-space>
		</div>
        
        <!-- CRUD 组件 -->
        <ma-crud :options="options" :columns="columns" ref="crudRef" :selected-keys="selected_keys?.value" @selection-change="setSelectedKeys"> 
            <template #box="{ record }">
				<div>{{ record?.box }}</div>
				<div>{{ record?.box_type }}</div>
				<div>{{ record?.box_belong }}</div>
				<div>{{ record?.is_empty == 1?'空箱':record?.is_empty == 2?'重箱':'' }}</div>
			</template>
			<template #goods_name="{ record }">
				<div>{{ record?.goods_name }}</div>
			</template>
            <template #number="{ record }">
                
                <div >
                    <p>
                        <a-tag style="margin-top: 5px" color="blue"
                            >剩余件数：{{ record.number }}</a-tag
                        >
                    </p>
                </div>
            </template>
            <template #weight="{ record }">
                
                <div >
                    <p>
                        <a-tag style="margin-top: 5px" color="blue"
                            >剩余重量：{{ record.weight }}</a-tag
                        >
                    </p>
                </div>
                
            </template>
			<template #warehouse_id="{ record }">
                <div v-if="record.warehouse_id > 0">
                    {{ record.warehouse_link?.warehouse.name }}/{{record.warehouse_link.horizontal_position}}-{{record.warehouse_link.release_position}}-{{record.warehouse_link.reaches_position}}
                </div>
                <div v-else>
                     
                </div>
                
            </template>
            <template #summaryCell="{ column, record, rowIndex }">
                {{
                    column.dataIndex == "dept_id" ? "合计" : column.dataIndex == "weight" ? (record[column.dataIndex] - 0).toFixed(3) : record[column.dataIndex]
                }}
            </template>
        </ma-crud>
        <div style="display:flex;justify-content: flex-end;margin-top:2%">
            <a-button type="primary" @click="handlefdslBeforeOk">确认提交</a-button>
        </div>

        <a-modal :mask-closable="false"  v-model:visible="showUpload" title="确认提交" @cancel="handleShow" :width="1000" :on-before-ok="handleOk">
            <div
				style="width: auto; padding: 24px 36px; box-sizing: border-box"
				id="crudContent"
			>
				<div
					style="display: flex; justify-content: center; margin-bottom: 40px"
				>
					<div style="font-size: 20px">{{ itemData.value?.item[0]?.dept?.name }}</div>
				</div>
				<div
					style="
						margin-bottom: 10px;
						display: flex;
						justify-content: space-between;
					"
				>
					<div>{{ itemData.value?.item[0]?.dept?.name }}品名：</div>
					<div>仓储日期：{{ newData }}</div>
				</div>
				<div style="margin-bottom: 10px" class="table">
					<table
						style="width: 100%"
					>
						<tr style="display: flex">
							<td
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>车号</div>
							</td>
							<td
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>合同号</div>
							</td>
                            <td
								
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>品名</div>
							</td>
                            
							<td
                            
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>集装箱</div>
							</td>
							<td
                           
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>箱型箱类</div>
							</td>
							<td
                            
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>数量(件)</div>
							</td>
                            <td
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>重量(吨)</div>
							</td>
							<!-- <td v-if="datas?.transport_type == 2" style="flex:1;display:flex;justify-content: center;align-items: center;"><div>重量(吨)</div></td> -->
						</tr>
						<tr
							v-for="(items, index) in itemData.value?.item"
							:key="index"
							style="display: flex"
						>
							<td
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>{{ items?.car_no }}</div>
							</td>
							<td
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>{{ items?.contract_no }}</div>
							</td>
							<td
                            
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>
									{{ items?.goods_name }}
								</div>
							</td>
							
							
							<td 
                            
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>{{ items?.box  }}</div>
							</td>
							<td
                            
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>{{ items?.box_type }}</div>
							</td>
							
							<td
								
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>{{ items?.number }}</div>
							</td>
                            <td
								
								style="
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div>{{ items?.weight }}</div>
							</td>
							<!-- <td v-if="item.prediction.transport_type == 2"  style="flex:1;display:flex;justify-content: center;align-items: center;"><div>{{ item.pick_weight }}</div></td> -->
						</tr>
					</table>
					
				</div>
			</div>
        </a-modal>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import predictionManage from "@/api/prediction/predictionManage";
import predictionOrder from "@/api/prediction/predictionOrder";
import predictionOrderDetail from "@/api/prediction/predictionOrderDetail";
import { request } from "@/utils/request.js";
import { Message } from "@arco-design/web-vue";
import { Notification } from "@arco-design/web-vue";

import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
const emits = defineEmits(['upLoadSuccess'])
const tab = ref(1)
const crudRef = ref();
const dept_id = ref('');
const contract_id = ref('');
let newData = "";
const goods_id = ref('');
const butt_type = ref('');
const showUpload = ref(false);
const transport_type = ref('');
const spaceArr = reactive([])
const itemData = reactive({})
const spaceValue = ref();
const selected_keys = reactive([]);

const handleShow = ()=>{
    showUpload.value = false
}
const handlechange = (e)=>{

    selected_keys.value = []
    dept_id.value = e[0]
    contract_id.value = e[1]
    // butt_type.value = e[3]
    
    crudRef.value.requestData();
}

const handleTab = (num) =>{
	tab.value = num
	crudRef.value.requestData();
}

const handlechangeInput = (e,val,item)=>{
    if((val - 0) > 0){   // 输入框输入值
        let num = selected_keys.value.findIndex(items=>{
            return items == item.id
        })
        if(num == -1){
            selected_keys.value.push(item.id)
        }
    }
}


const loadMore = (option, done)=>{
    if(option.level == '公司'){   //  获取公司合同号
        request({    //  获取公司列表
        url: 'system/userContract/remote',
        method: 'post',
        data:{
            props: { label: "name", value: "id" },
            openPage: false,
            remoteOption: {
                sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
                select: ["id", "name"],
                filter: {
                    dept_id: ["=", option.value],
                },
                relations: [],
            },
        }
        }).then(res=>{
            let arr = [];
            res.data.map((v,i)=>{
                arr.push({value:v.id,label:v.name,dept_id:option.value,level:'合同',isLeaf: true})
            })
            const nodes = arr
            
            done(nodes)
        })
        
        

        
    }
	
}
const setSelectedKeys = (val) => {
	selected_keys.value = val;
};
const open = (row) => {
    // crudRef.value.requestData();
    
    transport_type.value = row == 1?2:1
    let arr = [];
    request({    //  获取公司列表
      url: 'system/dept/getDeptList',
      method: 'get',
      params:{
        props: { label: "name", value: "id" },
        openPage: false,
        remoteOption: {
            sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
            select: ["id", "name"],
            filter: {
                type: ["=", 2],
            },
            relations: [],
        },
      }
    }).then(async res=>{
		console.log('公司列表：',res)
        res.data.map((v,i)=>{
			let children = []
			v.contract.map((vv,ii)=>{
				children.push({value:vv.id,label:vv.name})
			})
			arr.push({value:v.id,label:v.name,children:children})
        })
        spaceArr.value = arr
        
        selected_keys.value = []
        spaceValue.value = []
        dept_id.value = '999999'
        contract_id.value = '999999'
        crudRef.value.requestData()
    })
};

const handlefdslBeforeOk = async (e) => {
    let datas = []
    let _data = crudRef.value.getTableData()
   
    if(selected_keys.value.length == 0){
        return Notification.error("请选择品名！")
    }
    _data.map((v,i)=>{
        selected_keys.value.map((vv,ii)=>{
            if(v.id == vv){
                v.number = v.numbers
                v.weight = v.weights
                datas.push(v)
            }
            
        })
    })
    let number = 0
    let weight = 0
	datas.map((v,i)=>{
        number += (v.number - 0)
        weight += (v.weight - 0)
    })
	number = number
	weight = weight.toFixed(3)
    datas.push({car_no:'合计',contract_no:'',goods_name:'',box:'',box_type:'',number,weight})

    let num = datas.findIndex(item =>{
        return item.number == 0 || item.weight == 0
    })
    if(num > 0){
        return Notification.error("提货件数或重量不能为0！")
    }
    let options = {
        item: datas,
        leixing: {
            butt: butt_type.value,
            pick:{
                _rawValue:3
            }
        },
    };
    itemData.value = options
    newData = tool.dateFormat(
			Math.round(new Date().getTime() / 1000).toString(),
			"yyyy-MM-dd hh:mm:ss"
		);
    showUpload.value = true
    
};
const handleOk = async ()=>{
	let item = {
		item:[...itemData.value.item],
		leixing:itemData.value.leixing,
		car_ids:itemData.value.car_ids
	};
	item.item.pop()
    let cc = await predictionOrder.warehouseSave(item);
    if (cc.code == 200) {
        selected_keys.value = []
        spaceValue.value = []
        dept_id.value = '999999'
        contract_id.value = '999999'
        // butt_type.value = '999999'
        crudRef.value.refresh();
        Notification.success("仓储受理成功！");
        return true
    } else {
        selected_keys.value = []
        
        crudRef.value.refresh();
        Notification.error("仓储受理失败！");
        return false
    }
}

const numberOperation = (newValue, id, numberName) => {
	predictionManage
		.numberOperation({ id, numberName, numberValue: newValue })
		.then((res) => {
			res.success && Message.success(res.message);
		})
		.catch((e) => {
			console.log(e);
		});
};

const switchStatus = (statusValue, id, statusName) => {
	predictionManage
		.changeStatus({ id, statusName, statusValue })
		.then((res) => {
			res.success && Message.success(res.message);
		})
		.catch((e) => { });
};

const options = reactive({
    id: "flyos_prediction_manage",
    rowSelection: {
        showCheckedAll: true,
    },
    pk: "id",
    operationColumn: false,
    autoRequest:false,
    operationWidth: 160,
    isDbClickEdit: false,
    showSummary: true,
	summary: [
		{
			dataIndex: "number",
			action: "sum",
		},
		{
			dataIndex: "weight",
			action: "sum",
		},
	],
    bordered:{ wrapper: true, cell: true },
    formOption: {
        viewType: "modal",
        width: 600,
    },
    api: predictionManage.getList,
	recycleApi: predictionManage.getRecycleList,
    beforeRequest: (params) => {
		params.dept_id = dept_id.value;
		params.contract_id = contract_id.value;
		// params.butt_type = butt_type.value;
		params.transport_type = '';
        params.is_guogui=2;
	},
    afterRequest: (params) => {
		params.map((v, i) => {
            if(v.load_detail == null){   // 未生成装卸任务
				v.load = 3
			}else if(v.load_detail.detail_load_status == 0){ // 已生成装卸任务
				v.load = 2
			}else if(v.load_detail.detail_load_status == 1){ // 已生成装卸任务
				v.load = 1
			}
            v.numbers = v.number
            v.weights = v.weight
			if(v.prediction_pay_status == 1){
				v.disabled = false;
			}else{
				v.disabled = true;
			}
			v.weight = (v.weight - 0).toFixed(3)
		});
	},
});

const columns = ref([
	{
		title: "ID",
		dataIndex: "id",
		formType: "input",
		addDisplay: false,
		editDisplay: false,
		hide: true,
		commonRules: {
			required: true,
			message: "请输入ID",
		},
	},
	
    {
		title: "车号",
		dataIndex: "car_no",
		fixed: "left",
		align: "center",
		formType: "input",
		search: true,
	},
	{
		title: "装卸任务",
		dataIndex: "load",
		align: "center",
		formType: "select",
		width:100,
		search: true,
		fixed: "left",
		addDisplay: false,
		dict: {
		data() {
			return [
			{ label: "无", value: 3 },
			{ label: "未完成", value: 2 },
			{ label: "已完成", value: 1 },
			];
		},
		translation: true,
		tagColors: {
			1: "gray",
			2: "red",
			3: "green",
		},
		},
	},
	{
		title: "支付状态",
		dataIndex: "prediction_pay_status",
		formType: "select",
		align: "center",
		addDisplay: false,
		fixed: "left",
		search: false,
		dict: {
		name: "prediction_pay_status",
		props: {
			label: "title",
			value: "key",
		},
		translation: true,
		tagColors: {
			0: "red",
			1: "green",
		},
		},
	},

	{
		title: "品名",
		dataIndex: "goods_name",
		formType: "input",
		align: "center",
		search: true
	},
	
    {
		title: "数量（件）",
		dataIndex: "number",
		formType: "input",
		align: "center",
        width: 184,
        search: false,
		// search: true
	},
	{
		title: "计费重量（吨）",
		dataIndex: "weight",
		align: "center",
        width: 184,
		formType: "input",
		//search: true
	},
    {
		title: "箱号",
		dataIndex: "box",
		formType: "input",
		align: "center",
		search: true,
	},
	{
		title: "车厢位置",
		dataIndex: "transport_number",
		formType: "input",
		align: "center",
		search: false,
	},
	{
		title: "作业线路",
		dataIndex: "work_line",
		formType: "input",
		align: "center",
		search: false,
	},
	{
		title: "仓库位置",
		dataIndex: "warehouse_id",
		formType: "input",
		align: "center",
		search: false,
		addDisplay: false,
		editDisplay: false,
	},
	{
		title: "原始凭证号",
		dataIndex: "batch_no",
		align: "center",
        search: false,
		addDisplay: false,
		editDisplay: false,
	},
	{
		title: "原票号",
		dataIndex: "ticket_number",
		align: "center",
		formType: "input",
        search: false,
		commonRules: {
			// required: true,
			message: "请输入原票号",
		},
	},
	{
		title: "巡查状态",
		dataIndex: "check_status",
		formType: "select",
		align: "center",
		addDisplay: false,
		editDisplay: false,
        search: false,
		dict: {
			name: "check_status",
			props: {
				label: "title",
				value: "key",
			},
			translation: true,
		},
	},
	{
		title: "发站",
		dataIndex: "producer",
		align: "center",
		formType: "input",
		search: false,
	},
	{
		title: "运输方式",
		dataIndex: "transport_type",
		formType: "select",
		align: "center",
		search: false,
		dict: {
			name: "transport_type",
			props: {
				label: "title",
				value: "key",
			},
			translation: true,
		},
	},
	{
		title: "是否仓储",
		dataIndex: "serve_type",
		formType: "select",
		align: "center",
		search: false,
		dict: {
			name: "serve_type",
			props: {
				label: "title",
				value: "key",
			},
			translation: true,
		},
	},
	
	{
		title: "状态",
		dataIndex: "prediciont_status",
		formType: "select",
		align: "center",
		search: false,
		addDisplay: false,
		editDisplay: false,
		dict: {
			name: "prediciont_status",
			props: {
				label: "title",
				value: "key",
			},
			translation: true,
		},
	},
	
]);
defineExpose({ open });
</script>
<style>
.input {
	width: 100px;
	padding: 4px 12px;
	background: rgba(242, 243, 245);
	border: 1px solid rgba(242, 243, 245);
	border-radius: 4px;
	outline: none;
	/*清除input点击之后的黑色边框*/
}

.input:focus {
	background: #fff;
	border: 1px solid #1e80ff;
}
.table,
	th,
	tr,
	td {
		padding: 0px;
		box-sizing: border-box;
		text-align: center;
		font-size: 14px;
		line-height: 20px;
	}
	.table {
		border-top: 1px solid rgba(0, 0, 0);
		border-left: 1px solid rgba(0, 0, 0);
		width: 100%;
	}
	.table td {
		padding: 6px 10px;
		word-break: break-all;
		word-wrap: break-word;
	}
	.table tr td {
		border-right: 1px solid rgba(0, 0, 0);
		border-bottom: 1px solid rgba(0, 0, 0);
	}
	.act{
	position: relative;
	color:rgba(22,93,255,1);
}
.act::after{
	content:'';
	position:absolute;
	width:100%;
	height:4px;
	border-radius:2px;
	bottom:-8px;
	left:0px;
	background:rgba(22,93,255,1);
}
</style>
<script>

export default { name: "prediction:station" };
</script>
